<!--设备管理板块-->

<!--用户权限说明-->
<!--管理员：代码：1，可以做所有的操作-->
<!---->
<template>
  <div style="margin: 0;padding: 0">
    <el-container>
      <!--页面表头设计-->
      <el-header style="height: 7vh">
        <el-link class="headMain" href="http://10.255.96.48:3404/">俄动力质量管理系统</el-link>
        <span class="center-text">体系文件管理平台</span>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <div>
            <el-button style="margin-top: 10px;width: 100%" @click="querySystemClick(1)">查看文件</el-button>
          </div>
          <div>
            <el-button style="margin-top: 10px;width: 100%" @click="editSystem(1,null)" v-if="usePower===1">新增体系</el-button>
          </div>
          <div>
            <el-button style="margin-top: 10px;width: 100%" @click="querySystemClick(2)">查阅指导书</el-button>
          </div>
        </el-aside>
        <el-container>
          <!--主题设计-->
          <el-main style="height: 79vh">
            <div style="height: 100%" v-if="typeMainUse===1">
              <iframe
                  :src="pdfUrl"
                  width="100%"
                  height="100%"
              ></iframe>
            </div>
            <div style="display: flex;height: 75vh;margin-top: 10px" v-if="typeMainUse===2">
              <div style="width: 220px; border: 1px solid blue; box-sizing: border-box;overflow-y: auto">
                <div style="margin-top: 10px;text-align: center">
                  <span style="color: red;font-size: 18px">表单信息</span>
                  <el-link style="margin-left: 10px" @click="editTable(1)"><i class="el-icon-circle-plus-outline"></i></el-link>
                  <el-link style="margin-left: 10px" @click="editTable(2)"><i class="el-icon-edit"></i></el-link>
                  <el-link style="margin-left: 10px" @click="editTable(3)"><i class="el-icon-delete"></i></el-link>
                  <hr>
                </div>
                <div style="margin: 8px;text-align: left">
                  <span v-if="tableDataTemp.lineName===''"></span>
                  <span v-else-if="languageS==='chinese'">体系名称：</span>
                  <span v-else-if="languageS==='english'">线体名称：</span>
                  <span v-else-if="languageS==='russian'">线体名称：</span>
                  <hr>
                </div>
                <div style="margin:8px;text-align: left">
                  <span>要领名称：</span>
                  <hr>
                </div>
                <div style="margin:8px;text-align: left">
                  <span>要领类别：</span>
                  <hr>
                </div>
                <div style="margin:8px;text-align: left">
                  <span>已有数量：</span>
                  <hr>
                </div>
                <div style="margin: 8px;text-align: left">
                  <span >编制日期：</span>
                  <span>{{}}</span>
                  <hr>
                </div>
                <div style="margin: 8px;text-align: left">
                  <span>执行日期：</span>
                  <span>{{}}</span>
                  <hr>
                </div>
                <div style="margin: 8px;text-align: left">
                  <span>编制：</span>
                  <span>{{}}</span>
                  <hr>
                </div>
              </div>
              <div style="flex-grow: 1;
                  border: 1px solid blue;
                  box-sizing: border-box;
                  margin-left: 8px;
                  padding: 8px;
                  display: flex;
                  width: 100%">
                <div style="flex: 1;height: 75vh;scroll-margin-right: 8px;overflow-x: auto">
                  <div style="text-align: left;">
                    <el-link :style="{marginRight:'5px',backgroundColor:workBookHeard1 , color:workBookHeardColour1, padding: '4px 10px', borderRadius: '5px' }"
                             @click="workBookHeard(1)">流程指导书</el-link>
                    <span>|</span>
                    <el-link :style="{marginRight:'5px',backgroundColor:workBookHeard2 , color:workBookHeardColour2, padding: '4px 10px', borderRadius: '5px' }"
                             @click="workBookHeard(2)">确认要领书</el-link>
                    <span>|</span>
                    <el-link :style="{marginRight:'5px',backgroundColor:workBookHeard3 , color:workBookHeardColour3, padding: '4px 10px', borderRadius: '5px' }"
                             @click="workBookHeard(3)">上一条</el-link>
                    <span>|</span>
                    <el-link :style="{marginRight:'5px',backgroundColor:workBookHeard4 , color:workBookHeardColour4, padding: '4px 10px', borderRadius: '5px' }"
                             @click="workBookHeard(4)">下一条</el-link>
                  </div>
                  <hr>
                </div>
                <div style="flex: 1;">
                  <el-card shadow="hover" style="height: 72vh;margin-left: 8px">
                    <div style="width: 100%;height: 62vh;margin-top: -8px;text-align: left;">
                      <el-link>图片</el-link>
                      <span style="margin-left: 8px;margin-right: 8px">|</span>
                      <el-link>视频</el-link>
                      <hr>
                      <div class="block">
                        <el-carousel trigger="click" height="62vh">
                          <el-carousel-item v-for="(item, index) in 4" :key="index">
                          </el-carousel-item>
                        </el-carousel>
                        <el-carousel trigger="click" height="62vh" :autoplay="false">
                          <el-carousel-item v-for="(item, index) in 4" :key="index">
                          </el-carousel-item>
                        </el-carousel>
                      </div>
                    </div>
                  </el-card>
                </div>
              </div>
            </div>
          </el-main>
          <el-footer>
            <el-button plain size="small" @click="chooseLanguage('chinese')">中  文</el-button>
            <el-button plain size="small" @click="chooseLanguage('english')">Русский язык</el-button>
            <el-button plain size="small" @click="chooseLanguage('russian')">English</el-button>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>

    <!--弹窗放置区-->
    <!--点击上传PDF的体系文件-->
    <el-dialog
        :visible.sync="dialogPDF"
        title="体系文件上传">
      <el-upload
          class="upload-demo"
          action="#"
          :auto-upload="false"
          :on-change="saveFilePDF"
          :on-preview="handlePreviewPDF"
          :on-remove="handleRemovePDF"
          :before-remove="beforeRemovePDF"
          multiple
          :limit="1"
          :on-exceed="handleExceedPDF"
          :file-list="fileListPDF">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传PDF文件</div>
      </el-upload>
    </el-dialog>
    <!--点击删除PDF的体系文件-->
    <el-dialog
        :visible.sync="dialogPDFRemove"
        title="删除体系文件附件"
        width="60%">
      <div style="display: flex;">
        <div style="width: 200px; border: 1px solid blue; box-sizing: border-box; overflow-y: auto">
          <div v-for="(item, index) in systemFileList" :key="index" style="margin-top: 15px;margin-bottom: 15px">
            <!-- 显示当前遍历到的元素 -->
            {{ item }}
            <el-link @click="systemFileListDel(1,index)">点击查看</el-link>
            <el-link style="margin-left: 20px" @click="systemFileListDel(2,index)">点击删除</el-link>
          </div>
        </div>
        <div style="flex-grow: 1; border: 1px solid blue; box-sizing: border-box;margin-left: 10px">
          <iframe
              :src="pdfUrl"
              width="95%"
              height="350px"
          style="margin: 10px"></iframe>
        </div>
      </div>
    </el-dialog>

    <!--输入三个文本的弹窗类型（新增体系文件/修改体系文件名称-->
    <el-dialog
        :title="titleDialog"
        :visible.sync="dialogTextThree"
        width="50%"
        :before-close="handleClose">
      <div style="text-align: left">
        <div style="overflow: hidden;">
            <span style="font-size: 18px;color: red">中文体系名称：</span>
        </div>
        <el-input placeholder="请输入内容"
                  v-model="inputText1"
                  style="width: 100%;margin-top: 8px"
                  type="textarea"
                  :rows="2"></el-input>
      </div>
      <div style="margin-top: 10px;text-align: left">
        <span style="font-size: 18px">英文体系名称：</span>
        <el-input placeholder="请输入内容"
                  v-model="inputText2"
                  style="width: 100%;margin-top: 8px"
                  type="textarea"
                  :rows="2"></el-input>
      </div>
      <div style="margin-top: 10px;text-align: left">
        <span style="font-size: 18px">俄文体系名称：</span>
        <el-input placeholder="请输入内容"
                  v-model="inputText3"
                  style="width: 100%;margin-top: 8px"
                  type="textarea"
                  :rows="2"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogTextThree = false">取 消</el-button>
    <el-button type="primary" @click="saveDataTextThree">确 定</el-button>
  </span>
    </el-dialog>
    <!--抽屉放置区域-->
    <!---->
    <el-drawer
        :title="drawerTitle"
        :visible.sync="drawer"
        direction="ltr"
        size="400px">
      <el-table
          :data="tableData"
          border
          style="width: 361px;margin-left: 20px"
          height="100%">
        <el-table-column
            prop="docName"
            label="文件名称"
            width="360px"
            v-slot:default="scope">
          <div style="width: 100%" @click="tableDataRowClick(scope)">
            <div v-if="languageS==='chinese'">{{scope.row.docName.split('|*|')[0]}}</div>
            <div v-if="languageS==='english'">{{scope.row.docName.split('|*|')[2]}}</div>
            <div v-if="languageS==='russian'">{{scope.row.docName.split('|*|')[1]}}</div>
          </div>
        </el-table-column>
        <el-table-column
            label="编辑"
            width="360px"
            style="height: 100%"
            v-slot:default="scope"
            v-if="usePower===1">
          <el-link style="margin-left: 10px" @click="editSystem(2,scope)">修改</el-link>
          <el-link style="margin-left: 10px" @click="editSystem(3,scope)">上传附件</el-link>
          <el-link style="margin-left: 10px" @click="editSystem(4,scope)">删除附件</el-link>
          <el-link style="margin-left: 10px" @click="editSystem(5,scope)">删除体系文件</el-link>
        </el-table-column>
      </el-table>
    </el-drawer>

  </div>
</template>

<script>
import {
  filepath,
} from "@/configUse";
export default {
  name: "systemDocument",
  components: {
  },
  props: {
  },
  data() {
    return {
      activeName: 'first',
      //用户权限相关的变量
      useName:'',//用户名称
      useId:'',//用户编号
      usePower:'',//用户权限
      //记录用户选择的语言
      languageS:'chinese',
      //pdf预览
      pdfUrl:'',
      //大表数据
      tableData:[
        {
          //主键
          id: -1,
          //文件名称
          docName:'',
          //文件存储文件名
          docSrc:'',
          //作业指导书
          workBook:'',
          //培训记录
          trainRecord:'',
          //删除标记位
          deleteSign:'',
          //建立时间
          establishTime:'',
          //修改时间
          UpdateTime:'',
        }

      ],
      //编辑用，作为临时的变量
      tableDataTemp:{
        //主键
        id: -1,
        //文件名称
        docName:'',
        //文件存储文件名
        docSrc:'',
        //作业指导书
        workBook:'',
        //培训记录
        trainRecord:'',
        //删除标记位
        deleteSign:'',
        //建立时间
        establishTime:'',
        //修改时间
        UpdateTime:'',
      },
      //弹窗需要的变量
      //打开上传PDF文件
      dialogPDF:false,
      //打开删除PDF文件的窗口
      dialogPDFRemove:false,
      //打开三个文本框录入的变量(用在修改、新增体系文件上）
      dialogTextThree:false,
      //弹框表头显示的控制变量
      titleDialog:'提示',
      //弹框中输入的文本变量1
      inputText1:'',
      inputText2:'',
      inputText3:'',

      //抽屉的变量
      drawerTitle:'抽屉的提示信息',
      //控制抽屉的显示
      drawer:false,

      //记录用户的选择
      //记录用户选择的是修改体系名称，还是新增体系文件；1.新增体系文件；2.修改体系文件名称
      editSystemUse:0,
      //记录用户点击的大表信息，scope格式
      tableDataScope:'',

      //记录上传的PDF文件的文件列表
      fileListPDF:[],
      //记录上传的PDF文件的名称列表
      systemFileList:[],
      //用户点击的主菜单中的那个
      typeMainUse:1,
    }
  },
  watch: {},
  methods: {
    //查询用户信息的函数
    inquiry(){
      //输入用户编号，向后端查询信息
      const useId=localStorage.getItem('userName').replace(/"/g, '');
      this.$request.post('/useQueryPower',{
        queryFiledName:'systemDocument',
        userId:useId,
      }).then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        }else {
          this.useName=result.data.name
          this.usePower=result.data.systemDocument
          this.useId=useId
        }
      })
    },
    //通用，语言选择
    chooseLanguage(language){
      this.languageS=language
    },
    tableDataRowClick(scope){
      this.tableDataScope=scope
      //显示文件
      this.pdfUrl=filepath+scope.row.docSrc.split('|*|')[0]
    },
    // 通用，弹窗关闭的时候
    handleClose(done) {
      this.$confirm('确认关闭？')
          // eslint-disable-next-line no-unused-vars
          .then(_ => {
            done();
          })
          // eslint-disable-next-line no-unused-vars
          .catch(_ => {});
    },
    //点击查询体系按钮
    querySystemClick(doe){
      this.typeMainUse=doe
      if (doe===1){
        //是要查询体系文件
        //向后端发送请求，查询所有不同的体系文件
        this.$request.post("/querySystemDocName").then(result=>{
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          }else {
            this.tableData=result.data
          }
        })
        this.drawerTitle='体系文件列表'
        this.drawer=true
      }
    },
    //编辑体系文件名称、修改体系文件名称
    editSystem(doe,scope){
      this.editSystemUse=doe
      this.tableDataScope=scope
      if (doe===1){
        //增加一个体系文件名称
        this.inputText1=''
        this.inputText2=''
        this.inputText3=''
        this.titleDialog='您正在新增一个体系文件'
        this.dialogTextThree=true
      }
      else if (doe===2){
        //修改体系文件名称
        this.inputText1=scope.row.docName.split('|*|')[0]
        this.inputText2=scope.row.docName.split('|*|')[1]
        this.inputText3=scope.row.docName.split('|*|')[2]
        this.dialogTextThree=true
      }
      else if (doe===3){
        this.fileListPDF=[]
        //需要上传文件附件
        this.dialogPDF=true
      }
      else if (doe===4){
        //给文件列表赋值
        const temp =scope.row.docSrc.split('|*|')
        this.systemFileList=temp.slice(0, temp.length-1)
        this.dialogPDFRemove=true
      }
    },
    //新增、编辑体系文件，点击弹窗中的提交按钮
    saveDataTextThree(){
      if (this.editSystemUse===1){
        // 是新增体系文件，向后端发送请求，增加一个体系文件，这个体系文件只包含了文件名。修改一个字段。
        //判断用户输入的信息是不是全面
        if (this.inputText1==='' && this.inputText2===''  && this.inputText3===''){
          alert("您未给体系文件名称，请输入")
          return
        }
        else {
          if (this.inputText1===''){
            this.inputText1='请输入汉语的体系文件名称'
          }
          else if (this.inputText2===''){
            this.inputText2='Please enter the system file name in Chinese'
          }
          else if (this.inputText3===''){
            this.inputText3='Введите имя файла китайской системы'
          }
        }
        //组合新的数据
        const str=this.inputText1+'|*|'+this.inputText2+'|*|'+this.inputText3
        //向后端发送请求
        this.$request.post('/insertSystemDocument',str).then(result=>{
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          }else {
            //对大表赋值
            const temp={
              //主键
              id: -1,
              //文件名称
              docName:str,
              //文件存储文件名
              docSrc:'',
              //作业指导书
              workBook:'',
              //培训记录
              trainRecord:'',
              //删除标记位
              deleteSign:'',
              //建立时间
              establishTime:'',
              //修改时间
              UpdateTime:'',
            }
            this.tableData.push(temp)
            this.dialogTextThree=false
          }
        })
      }
      else if (this.editSystemUse===2){
        //是修改体系文件名称
        //判断用户输入的信息是不是全面
        if (this.inputText1==='' && this.inputText2===''  && this.inputText3===''){
          alert("您未给体系文件名称，请输入")
          return
        }
        else {
          if (this.inputText1===''){
            this.inputText1='请输入汉语的体系文件名称'
          }
          else if (this.inputText2===''){
            this.inputText2='Please enter the system file name in Chinese'
          }
          else if (this.inputText3===''){
            this.inputText3='Введите имя файла китайской системы'
          }
        }
        //组合新的数据
        const str=this.inputText1+'|*|'+this.inputText2+'|*|'+this.inputText3
        //向后端发送请求
        this.$request.post('/editFiledOneById',{
          id:this.tableDataScope.row.id,
          fieldName:'docName',
          fieldVal:str,
          fieldOldVal:this.tableDataScope.row.docName
        })
            .then(result=>{
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          }else {
            //对大表赋值
            this.tableData[this.tableDataScope.$index].docName=result.data
            this.tableDataScope.row.docName=result.data
            this.dialogTextThree=false
          }
        })
      }
    },
    //体系文件上传过程中的函数，上传PDF文件
    handleRemovePDF(file, fileList) {
      console.log(file, fileList);
    },
    handlePreviewPDF(file) {
      console.log(file);
    },
    handleExceedPDF(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemovePDF(file, fileList) {
      console.log(fileList)
      return this.$confirm(`确定移除 ${ file.name }？`)
    },
    saveFilePDF(file){
      //上传体系文件PDF文档(这个函数只用于体系文件上传)
      //是对图片的操作
      const formData = new FormData()
      //1.新生成一个文件名称,并且把文件名称的后缀添加上
      let fileName=this.generateUniqueId()+'.'+file.name.split('.')[file.name.split('.').length-1]
      //把新的文件名称放进去
      file.name=fileName
      formData.append('file', file.raw)
      //判断是否有文件，如果有，提示用户，旧文件已经删除。
        //向后端发送内容，保存文件,体系文件不打算删除，都保存起来，用分割符进行分割。
        formData.append('id',this.tableDataScope.row.id)
        formData.append('fieldName','docSrc')
        formData.append('fieldVal',fileName+'|*|'+this.tableDataScope.row.docSrc)
        formData.append('fileName',fileName)
      // 保存文件，需要返回修改后的文件地址保存数据，并且进行赋值
      this.$requestFile.post('/addPDFSystemDocument',formData).
      then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        }else {
          if (result.data===null){
            alert("程序出现异常，请联系管理员")
          }else {
            //修改列表中的数据
            //修改主表中的数据和记录的保存数据
            this.tableData[this.tableDataScope.$index].docSrc=result.data
            this.tableDataScope.row.docSrc=result.data
            //修改PDF显示器中的文件路径
            this.pdfUrl=filepath+result.data.split('|*|')[0]
          }
        }
      })
    },
    //删除体系文件
    systemFileListDel(doe,index){
      if (doe===1){
        //查看体系文件
        this.pdfUrl=filepath+this.systemFileList[index]
      }
      else if (doe===2){
        // 是删除，先记录先要删除的文件名称
        const delName=this.systemFileList[index]
        this.systemFileList.splice(index,1)
        this.pdfUrl=''
        //向后端发送请求，删除文件
        // 组合新的文件列表名称
        let strTemp=''
        if (this.systemFileList.length>0){
          for (let i = 0; i <this.systemFileList.length ; i++) {
            strTemp=strTemp+this.systemFileList[i]+'|*|'
          }
        }
        else {
            strTemp=''
        }
        this.$request.post('delFilePdfSystemDocument',{
          id:this.tableDataScope.row.id,
          fieldName:'docSrc',
          fieldVal:strTemp,
          fileName:delName
        })
            .then(result=>{
              if (result.code === 401) {
                this.$router.push('UserLogin')
                alert("您未登录，请登录")
              }else {
                if (result.data==='删除文件时出错'){
                  alert("删除文件时出错,请联系管理员")
                }else {
                  //修改列表中的数据
                  //修改主表中的数据和记录的保存数据
                  this.tableData[this.tableDataScope.$index].docSrc=result.data
                  this.tableDataScope.row.docSrc=result.data
                }
              }
        })

      }
    },
    //生成唯一标识码的函数（利用时间戳和随机数
    generateUniqueId() {
      return Date.now().toString() + Math.random().toString(36).slice(2, 11);
    },
  },
  mounted() {
    this.inquiry()
  }
}
</script>

<style scoped>
/* 主体左侧的工作步骤栏用到的数据包围的div的样式*/

.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  border-left-color: white;
  border-top: white;
}

.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  height: 89vh;
}

.el-main {
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-left-color: white;
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.headMain{
  color: #ffffff; /* 设置字体颜色为红色 */
  font-size: 18px;
}
.center-text {
  /* 使用 margin-left 和 margin-right auto 来实现居中效果 */
  margin-left: auto;
  margin-right: auto;
  /* 注意：如果 header 内只有这两个元素，你可能不需要 margin-right: auto */
}

/*自定义样式*/

</style>